<template>
  <div>
    <van-swipe-cell v-for="(item, index) in cart.list" :key="item.objectId">
      <div class="my-swipe-cell">
        <van-checkbox
          v-model="item.ischeck"
          @click="handleCheck(item.objectId, item.ischeck)"
          class="my-checkbox"
        ></van-checkbox>
        <van-card
          class="my-card"
          :price="item.originprice"
          :title="item.proname"
          :thumb="item.img1"
        >
          <template #num>
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
            />
          </template>
        </van-card>
      </div>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="handleDel(item.objectId, index)"
        />
      </template>
    </van-swipe-cell>
    <van-submit-bar
      :price="cart.allInfo.allPrice"
      button-text="提交订单"
      class="submit-bar"
      @submit="handleSubmit"
    >
      <van-checkbox v-model="cart.allInfo.allCheck" @click="handleAllCheck"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script setup lang="ts">
import { cartPut, cartBatch } from "../api/user";
import { useCart } from "../store/cart";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { useAddress } from "../store/address";
const router = useRouter();
const cart = useCart();
//删除购物车
const handleDel = (cartid: string, idx: number) => {
  cart.cartDelAct(cartid, idx);
};
//全选
const handleAllCheck = () => {
  let allCheck = cart.allInfo.allCheck; //原来的全选状态的取反状态
  cartBatch(cart.list, allCheck).then((res) => {
    // console.log(allCheck);
    cart.list.forEach((item) => {
      item.ischeck = allCheck;
    });
  });
};
const handleCheck = (cartid: string, ischeck: boolean) => {
  // console.log(cartid, ischeck);
  cartPut(cartid, { ischeck });
};

const address = useAddress();
const handleSubmit = () => {
  if (cart.allInfo.allPrice == 0) {
    showToast("请选择结算的商品");
  } else {
    address.addressIdInitAct();
    router.push("/order");
  }
};
</script>

<style lang="scss" scoped>
.delete-button {
  height: 100%;
}
.my-swipe-cell {
  display: flex;
  align-items: center;
  .my-checkbox {
    margin: 0 10px;
  }
  .my-card {
    width: 90%;
  }
}
.submit-bar {
  bottom: 50px;
}
</style>
